<template>
  <div class="container-randoms">
    <!-- 题库管理-组题列表 -->
    <el-card>
      <!-- 内容 -->
      <el-form
        label-width="80px"
        size="small"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="关键字:">
          <el-input v-model="requestParameters.id" style="width:400px"></el-input>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button @click="empty()">清除</el-button>
          <el-button type="primary" @click="handleSearch()">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-alert class="alert" :title="`数据一共${counts}条`" type="info" show-icon></el-alert>

      <!-- 表格 -->
      <el-table :data="container" style="width:100%">
        <el-table-column prop="id" label="编号" width="220px"></el-table-column>+
        <el-table-column label="题型" width="80px">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType == 1">单选</span>
            <span v-if="scope.row.questionType == 2">多选</span>
            <span v-if="scope.row.questionType == 3">简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题目编号" width="200px" @click="getDetails()">
          <template slot-scope="scope">
            <a
              href="#"
              v-for="(value,index) in scope.row.questionIDs"
              :key="index"
              class="sat"
              @click="handleChange(value.id)"
              style="color:#0fa2fa"
            >{{ value.number+'\r\n' }}</a>
          </template>
          <!-- 这里换行 -->
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="180px"></el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间（s）" width="280px"></el-table-column>
        <el-table-column prop="accuracyRate" width="293px" label="正确率(%)"></el-table-column>
        <el-table-column prop="userName" label="录入人" width="290px"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleDelete(scope.row.id)"
              type="danger"
              icon="el-icon-delete"
              circle
              plain
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="requestParameters.page"
        :total="counts"
        :page-size="requestParameters.pagesize"
        :page-sizes="[20,30,50,100]"
        layout="total, prev, pager, next, sizes, jumper"
        style="float:right"
      ></el-pagination>
    </el-card>
    <!-- 打开对话框之前，1.根据试题的id拿到试题数据，2. -->
    <el-dialog title="题目预览" :visible.sync="previewDialog" width="60%">
      <div class="preview">
        <el-row>
          <!-- 题型 -->
          <el-col :span="6">
            【题型】：{{
            previewInfo.questionType == "1"
            ? "单选题"
            : previewInfo.questionType == "2"
            ? "多选题"
            : "简答题"
            }}
          </el-col>
          <el-col :span="6">【编号】： {{ previewInfo.id }}</el-col>
          <!-- 难度 -->
          <el-col :span="6">
            【难度】：
            {{
            previewInfo.difficulty == "1"
            ? "简单"
            : previewInfo.difficulty == "2"
            ? "一般"
            : "困难"
            }}
          </el-col>
          <!-- 标签 -->
          <el-col :span="6">【标签】：{{ previewInfo.tags }}</el-col>
        </el-row>
        <el-row style="margin-top:20px">
          <el-col :span="6">【学科】：{{ previewInfo.subjectName }}</el-col>
          <el-col :span="6">【目录】：{{ previewInfo.directoryName }}</el-col>
          <el-col :span="6">【方向】：{{ previewInfo.direction }}</el-col>
          <!-- <el-col :span="6"></el-col> -->
        </el-row>
        <el-divider></el-divider>
        <!-- 预览题干部分 -->
        <el-row>
          <p class="elQuestions">【题干】：</p>
          <span
            style="color:blue; font-weight: bold;"
            v-html="previewInfo.question"
          >{{ previewInfo.question }}</span>
          <!-- xxxx题选项 -->
          <!-- 选项简答区域 -->
          <!-- 如果是单选的时候出现这个 -->
          <div class="radioArea" v-if="previewInfo.questionType == 1">
            <p>单选题 选项：（以下选中的选项为正确答案）</p>
            <el-table
              ref="singleTable"
              :show-header="false"
              :data="previewInfo.options"
              style="width: 100%"
            >
              <el-table-column type="index" width="800px">
                <template slot-scope="scope">
                  <el-radio v-model="checked" :label="scope.row.isRight">
                    {{
                    scope.row.title
                    }}
                  </el-radio>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 如果是多选 -->
          <div class="checkboxArea" v-if="previewInfo.questionType == 2">
            <p>多选题 选项:（以下选中的选项为正确答案）</p>
            <!-- 复选框 -->
            <el-table :show-header="false" :data="previewInfo.options" style="width: 100%">
              <el-table-column type="index" width="100%">
                <template slot-scope="scope">
                  <el-checkbox-group v-model="checkboxChecked">
                    <el-checkbox :label="scope.row.isRight">
                      {{
                      scope.row.title
                      }}
                    </el-checkbox>
                  </el-checkbox-group>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 如果是简答----》不用设置 -->
        </el-row>
        <el-divider></el-divider>
        <!-- 参考答案 -->
        <el-row>
          <div class="referAnswer">
            <span>【参考答案】：</span>
            <el-button
              style="margin-bottom:10px"
              @click="referAnswer(previewInfo.videoURL)"
              size="small"
              type="danger"
            >视频答案整屏预览</el-button>
            <br />
            <video
              :src="previewInfo.videoURL"
              controls
              preload="metadata"
              controlswidth="200"
              height="230"
            ></video>
          </div>
        </el-row>
        <el-divider></el-divider>
        <!-- 答案解析 -->
        <el-row>
          <div class="answerKey">
            【答案解析】：
            <span v-html="previewInfo.answer"></span>
          </div>
        </el-row>
        <el-divider></el-divider>
        <!-- 题目备注 -->
        <el-row>
          <div class="titleNote">
            【题目备注】：
            <span v-html="previewInfo.remarks"></span>
          </div>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="previewDialog = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms } from "@/api/hmmm/questions";
import { list, detail } from "@/api/hmmm/questions";
export default {
  name: "randoms-page",
  data() {
    return {
      counts: 0, //总数据量
      requestParameters: {
        // 当前页码
        page: 1,
        // 每一页显示多少条
        pagesize: 20
      },

      // 修改对话框的显示与隐藏
      dialogFormVisible: false,

      formInline: {
        user: "",
        region: ""
      },
      previewDialog: false,
      previewInfo: {},
      checked: 1,
      checkboxChecked: [1],
      form: {
        id: "",
        number: "",
        questionType: "",
        questionsIDs: []
      },
      editForm: {
        questionsIDs: ""
      },
      obj: {},
      input: "",
      value: "true",
      container: [],
      total: null
    };
  },
  created() {
    this.getQuestions();
  },
  methods: {
    empty() {
      // 判断输入框里面是否有内容，有的话清空
      if (this.requestParameters.id) {
        this.requestParameters.id = "";
      }
    },

    // 改变页面数据条数
    handleSizeChange(newSize) {
      this.requestParameters.page === 1;
      this.requestParameters.pagesize = newSize;
      this.getQuestions(this.requestParameters);
    },
    // 进入某一页
    handleCurrentChange(newPage) {
      this.requestParameters.page = newPage;
      this.getQuestions();
    },

    // 获取组题列表
    async getQuestions() {
      try {
        const data = await randoms(this.requestParameters);
        // console.log(data);
        this.container = data.data.items;
        this.counts = data.data.counts;
      } catch (err) {
        this.$message.error("获取列表失败");
      }
    },

    handleSearch() {
      this.requestParameters.page = 1;
      this.getQuestions();
    },

    // 获取试题数据
    // async handleChange(val) {
    //   console.log(val);

    //   // 根据试题id去获取试题数据
    //   let res = await detail({ id: val });
    //   console.log(res);
    //   // console.log(this.editForm)
    //   this.dialogFormVisible = true;
    // },

    // 打开对话框
    handleChange(val) {
      this.previewDialog = true;
      detail({ id: val }).then(({ data }) => {
        console.log(data);
        this.previewInfo = data;
      });
    },

    // 删除学科列表
    handleDelete(id) {
      // element-ui 确认框
      this.$confirm("此操作将永久删除该文章, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          try {
            // await this.$http.delete(`/questions/randoms/${data.id}`);
            await removeRandoms({ id });
            // 删除成功
            this.$message.success("删除成功");
            this.getQuestions();
          } catch (e) {
            console.dir(e);
            // 删除失败
            this.$message.error("删除失败");
          }
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped>
.alert {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 8px 16px;
}
.sat {
  margin-right: 10px;
}
</style>

